<template>
  <div>
<!--轮播图-->
  <Carousel></Carousel>
<!--搜索栏-->
    <Search></Search>
<!--展示医院的结构-->
    <el-row>
      <el-col :span="20">
        <!--分级-->
        <Level @transLevel="transLevel" @transRegion="transRegion"></Level>
        <Card :hospitalArr="hospitalArr" v-if="hospitalArr.length>0"></Card>
        <el-empty description="暂无数据" v-else/>
<!-- 分页器-->
        <div class="pagination">
          <el-pagination
              v-model:current-page="pageNo"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 40]"
              :background="true"
              layout=" prev, pager, next, jumper,->,sizes,total"
              :total="total"
              @current-change="pageChange"
              @size-change="pageSizeChange"

          />
        </div>
      </el-col>
      <el-col :span="4">
       <tip></tip>
      </el-col>
    </el-row>

  </div>
</template>

<script setup lang="ts">
import Carousel from './Carousal/index.vue'
import Search from './Search/index.vue'
import Level from './Level/index.vue'
import Card from './Card/index.vue'
import tip from './tip/index.vue'
import {onMounted,ref} from "vue";
import {reqHostital,} from "@/api/home/index.ts";
import type {Content,HospitalReaponseData} from "@/api/home/type.ts";
//分页器需要的数据
let pageNo=ref<number>(1)
// 分页器一页展示多少数据
let pageSize=ref<number>(10)
// 医院数据总条数
let total=ref<number>(0)
// 存储医院数据
let hospitalArr=ref<Content>([])
// 医院等级
let hostype=ref<string>('')
// 医院区域
let districtCode=ref<string>('')
onMounted(()=>{
  getHospitalInfo()
})
// 获取医院数据
const getHospitalInfo=async ()=>{
  let result:HospitalReaponseData=await reqHostital(pageNo.value,pageSize.value,hostype.value,districtCode.value)
  hospitalArr.value=result.data.content
  total.value=result.data.totalElements

}



// 分页器当前页面发生变化
const pageChange=()=>{
  getHospitalInfo()
}
// 分页器一个一页面显示多少条
const pageSizeChange=()=>{
  getHospitalInfo()
}
// 自定义事件获取子组件医院等级
const transLevel=(value:string)=>{
  hostype.value=value
  getHospitalInfo()
}
// 自定义事件获取子组件医院区等级
const transRegion=(value:string)=>{
  districtCode.value=value
  getHospitalInfo()
}

</script>

<style scoped>
.pagination{
  margin-top: 20px;
}
.none{
  width: 100%;
  height: 70px;
}
</style>